<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹出层</title>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
</head>
<body>
    <div class="layui-btn-group">
        <button class="layui-btn" id="btn1">btn-type0</button>
        <!--    页面层，content属性可以设置HTML代码    -->
        <button class="layui-btn" id="btn2">btn-type1</button>
        <!--    iframe层，content属性可以设置页面路径URL    -->
        <button class="layui-btn" id="btn3">btn-type2</button>
    </div>

    <div class="layui-fluid" id="myForm" style="display: none">
        <form action="#" class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-inline">
                    <!--
                        required: 浏览器固定的必填字段
                        lay-verify: 需要验证的类型(值为 required 的话表示必填项)
                        autocomplete: 不设置自动填充
                    -->
                    <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input" required lay-verify="required">
                </div>
            </div>

            <!--
               下拉选择框
                   1. 通过selected属性设置默认选中项
                   2. 通过disabled属性开启禁用，可以设置select和option标签（禁用下拉框和禁用下拉选项）
                   3. 可以通过 optgroup 标签给select分组
                   4. 通过设置lay-search属性开启搜索匹配功能
            -->
            <div class="layui-form-item">
                <label class="layui-form-label">城市</label>
                <div class="layui-input-inline">
                    <select name="city" lay-verify="required">
                        <option value="">请选择一个城市</option>
                        <option value="010">北京</option>
                        <option value="021" selected>上海</option>
                        <option value="0571" disabled>杭州</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">城市</label>
                <div class="layui-input-inline">
                    <!-- 分组 -->
                    <select name="quiz">
                        <option value="">请选择</option>
                        <!-- 分组城市记忆 -->
                        <optgroup label="城市记忆">
                            <option value="你工作的第一个城市">你工作的第一个城市？</option>
                        </optgroup>

                        <!-- 分组学生时代 -->
                        <optgroup label="学生时代">
                            <option value="你的工号" selected>你的工号？</option>
                            <option value="你最喜欢的老师">你最喜欢的老师？</option>
                        </optgroup>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">城市</label>
                <div class="layui-input-inline">
                    <!-- lay-search: 开启搜索匹配 -->
                    <select name="city" lay-verify="required" lay-search>
                        <option value ="">请选择</option>
                        <option value="010">layer</option>
                        <option value="021">form</option>
                        <option value="0571">layim</option>
                    </select>
                </div>
            </div>

            <!--            复选框-->
            <div class="layui-form-item">
                <label class="layui-form-label">爱好</label>
                <!--                开关风格-->
                <div class="layui-input-block">
                    <input type="checkbox" name="like[write]" title="写作" checked>
                    <input type="checkbox" name="like[read]" title="阅读">
                    <input type="checkbox" name="like[rap]" title="rap">
                </div>
                <!--                原始风格-->
                <div class="layui-input-block">
                    <input type="checkbox" name="like[write]" title="写作" lay-skin="primary">
                    <input type="checkbox" name="like[read]" title="阅读" lay-skin="primary">
                    <input type="checkbox" name="like[rap]" title="rap" lay-skin="primary" checked>
                </div>
            </div>

            <!--            开关-->
            <div class="layui-form-item">
                <label class="layui-form-label">开关</label>
                <div class="layui-input-block">
                    <input type="checkbox" lay-skin="switch" checked>
                    <input type="checkbox" lay-skin="switch" lay-text="on|off">
                    <input type="checkbox" lay-skin="switch" lay-text="打开|关闭">
                    <input type="checkbox" lay-skin="switch" lay-text="打开|关闭" disabled>
                </div>
            </div>

            <!--            单选框-->
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="0" title="男">
                    <input type="radio" name="sex" value="1" title="女" checked>
                </div>
            </div>

            <!--            文本域-->
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">个人简介</label>
                <div class="layui-input-inline">
                    <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>

            <!--            组装行内表单-->
            <div class="layui-form-item">
                <!--                定义外层行内: layui-inline-->
                <div class="layui-inline">
                    <label class="layui-form-label">范围</label>
                    <!--                    定义内层行内：layui-input-inline-->
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <!-- 定义外层行内 -->
                <div class="layui-inline">
                    <label class="layui-form-label">密码</label>
                    <!-- 定义内层行内 -->
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="password" name="" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <button type="reset" class="layui-btn layui-btn-primary">查询</button>
                </div>
            </div>

            <!--            按钮-->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

    <script>
        layui.use(["layer"], function () {
            var layer = layui.layer;
            var $ = layui.jquery;

            $("#btn1").click(function () {
                layer.open({
                    type: 0,
                    title: "我是标题",
                    content: "我是内容",
                    skin: "layui-layer-lan",    // 皮肤
                    area: ['500px', '300px'],   // 宽高
                    offset: "auto",             // 弹出层在屏幕中的坐标
                    icon: 1,
                    btn: ['按钮一', '按钮二', '按钮三'],
                    yes: function (index, layero) {
                        layer.alert("点击了按钮一");
                    },
                    btn2: function (index, layero) {
                        layer.alert("点击了按钮二");
                    },
                    btn3: function (index, layero) {
                        layer.alert("点击了按钮三");
                    },
                    closeBtn: 1,                 // 关闭按钮
                    anim: 5,                     // 弹出动画
                    resize: false,              // 不允许拉伸
                })
            });

            $("#btn2").click(function () {
                layer.open({
                    type: 1,
                    title: "我是标题",
                    content: $("#myForm"),      // 用$()来获取
                    skin: "layui-layer-lan",    // 皮肤
                    area: ['500px', '300px'],   // 宽高
                    offset: "auto",             // 弹出层在屏幕中的坐标
                    icon: 1,
                    btn: ['按钮一', '按钮二', '按钮三'],
                    yes: function (index, layero) {
                        layer.alert("点击了按钮一");
                    },
                    btn2: function (index, layero) {
                        layer.alert("点击了按钮二");
                    },
                    btn3: function (index, layero) {
                        layer.alert("点击了按钮三");
                    },
                    closeBtn: 1,                 // 关闭按钮
                    anim: 5,                     // 弹出动画
                    resize: false,              // 不允许拉伸
                })
            });

            $("#btn3").click(function () {
                layer.open({
                    type: 2,
                    title: "我是标题",
                    content: "07-biaodan.html",
                    skin: "layui-layer-lan",    // 皮肤
                    area: ['500px', '300px'],   // 宽高
                    offset: "auto",             // 弹出层在屏幕中的坐标
                    icon: 1,
                    btn: ['按钮一', '按钮二', '按钮三'],
                    yes: function (index, layero) {
                        layer.alert("点击了按钮一");
                    },
                    btn2: function (index, layero) {
                        layer.alert("点击了按钮二");
                    },
                    btn3: function (index, layero) {
                        layer.alert("点击了按钮三");
                    },
                    closeBtn: 1,                 // 关闭按钮
                    anim: 5,                     // 弹出动画
                    resize: false,              // 不允许拉伸
                })
            });

        });
    </script>
</body>
</html>